<template>
    <!--
     * 排序 order
     * 1 价格升序
     * 2 价格降序
     * 3 销量升序
     * 4 销量降序
    -->
    <div @click="returnClick" class="order-box">
        <div class="order-item" @click="sortClickByPrice">
            <text class="order-text">价格排序</text>
            <div class="order-icon">
                <image class="icon" resize="cover" :src="order == 1 ? iconUpActive : iconUp"></image>
                <image class="icon icon-down" resize="cover" :src="order == 2 ? iconUpActive : iconUp"></image>
            </div>
        </div>

        <div class="order-item" @click="sortClickBySale">
            <text class="order-text">销量排序</text>
            <div class="order-icon">
                <image class="icon" resize="cover" :src="order == 3 ? iconUpActive : iconUp"></image>
                <image class="icon icon-down" resize="cover" :src="order == 4 ? iconUpActive : iconUp"></image>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .order-box {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .order-item {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-left: 33px;
    }
    .order-text {
        font-size: 30px;
        color: #313131;
        font-family: msyhl;
    }
    .order-icon {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding-left: 8px;
    }
    .icon {
        width: 19px;
        height: 9px;
    }
    .icon-down {
        margin-top: 5px;
        transform-origin: center center;
        transform: rotate(180deg) translateX(0.5px);
    }
</style>

<script >
    import iconUp from 'assets/images/icon-arrow-up.png';
    import iconUpActive from 'assets/images/icon-arrow-up-active.png';

    export default{
        props: {
            order: {
                type: Number,
                default: 1 //默认价格排序
            }
        },
        data(){
            return {
                iconUp: iconUp,
                iconUpActive: iconUpActive
            }
        },
        methods: {
            sortClickByPrice(){
                if(this.order == 1){
                    this.order = 2;
                } else {
                    this.order = 1;
                }
                this.$emit("sortClick",this.order);
            },
            sortClickBySale(){
                if(this.order == 3){
                    this.order = 4;
                } else {
                    this.order = 3;
                }
                this.$emit("sortClick",this.order);
            },
            returnClick(e){ //阻止点穿
                return false;
            }
        }
    }
</script>
